/**
* 一些二次封装的类
*/
.xt-btn,
.xt-base-btn,
.xt-active-btn,
.xt-theme-btn,
.xt-error-btn,
.xt-warn-btn,
.xt-link-btn,
.xt-success-btn {
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 12px;
}

// 基础按钮
.xt-base-btn {
  color: var(--primary-text);
}
// 主题色按钮
.xt-active-btn {
  // 防拖拽
  // 次要背景色
  background: var(--active-bg) !important;
  // 主题字体颜色
  color: var(--active-text) !important;
  fill: var(--active-text) !important;

  border-radius: 12px;
  &:active {
    background: var(--active-secondary-bg) !important;
  }
}

.xt-theme-btn {
  background: var(--active-bg) !important;
  color: var(--active-text) !important;

  &:hover {
    background: var(--active-secondary-bg) !important;
  }
}

// 默认按钮
.xt-btn {
  background: var(--secondary-bg);
  color: var(--primary-text);

  &:hover {
    background: var(--active) !important;
  }
}
.xt-default-btn {
  background: var(--secondary-bg);
  color: var(--primary-text);
  &:hover {
    background: var(--active) ;
  }
}
.xt-error-btn {
  background: rgba(255, 77, 79, 0.2);
  color: var(--error);
}
.xt-warn-btn {
  background: rgba(250, 173, 20, 0.2);
  color: var(--warning);
}
.xt-link-btn {
  background: rgba(80, 139, 254, 0.2);
  color: var(--link);
}
.xt-success-btn {
  background: rgba(82, 196, 26, 0.2);
  color: var(--success);
}

// 边框区
.xt-bl {
  border-left: 1px solid var(--divider);
}
.xt-br {
  border-right: 1px solid var(--divider);
}
.xt-bt {
  border-top: 1px solid var(--divider);
}
.xt-bb {
  border-bottom: 1px solid var(--divider);
}

.xt-theme-bl {
  border-left: 1px solid var(--active-bg);
}
.xt-theme-br {
  border-right: 1px solid var(--active-bg);
}
.xt-theme-bt {
  border-top: 1px solid var(--active-bg);
}
.xt-theme-bb {
  border-bottom: 1px solid var(--active-bg);
}

.xt-hover {
  &:hover {
    background: var(--active) !important;
  }
}
// 点击状态
.xt-active {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transition: all 0.2s;
  &:active {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

// 滚动条
.xt-scrollbar {
  flex: 1 1 0%;
  overflow: hidden;
  // overflow-y: auto;
}
.xt-scrollbar:hover {
  overflow: overlay;
}

.xt-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.xt-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  background: var(--active-bg);
  border-radius: 3px;
}

// 阴影
.xt-shadow {
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
}

/* 隐藏滚动条 */
.xt-container {
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
  overflow: scroll; /* 其他浏览器 */
  -webkit-overflow-scrolling: touch; /* iOS 滚动效果 */
  scroll-behavior: smooth;
  &::-webkit-scrollbar {
    display: none; /* Chrome 和 Safari */
  }
}

/* 创建一个自定义滚动条 */
.xt-container::-webkit-scrollbar {
  display: none; /* Chrome 和 Safari */
}

.h-48 {
  height: 48px !important;
}

.w-120 {
  width: 120px !important;
}
.num-youshe {
  font-family: "优设标题黑";
}

.tt-divider {
  height: 1px;
  width: 100%;
  margin-bottom: 12px;
  background-color: var(--divider)
  }
